<template>
  <div class="details">
    <div class="return" @click="back">
      <span>Go back</span>
      <img src="@/assets/images/return_you.png" alt />
    </div>
    <h1>{{title}}</h1>
    <div class="content" v-html="content"></div>
    <div class="allTime">
      <div class="time_item">
        <span>Deadline for registration：</span>
        <div>{{info.finish_time}}</div>
      </div>
      <div class="time_item">
        <span>Activity time：</span>
        <div>{{info.activity_time}}</div>
      </div>
      <div class="time_item">
        <span>Event Location：</span>
        <div>{{info.address}}</div>
      </div>
    </div>
    <!-- -->
    <div class="signUp" v-if="ifsignUp">
      <div class="signUp_title">Sign Up</div>
      <div class="signUp_list">
        <div class="signUp_item">
          <span>Name :</span>
          <input v-model="name" type="text" />
        </div>
        <div class="signUp_item">
          <span>Phone :</span>
          <input v-model="tel" type="text" />
        </div>
        <div class="signUp_item">
          <span>Address :</span>
          <input v-model="address" type="text" />
        </div>
      </div>
      <div class="up">
        <div class="up_btn" @click="onSingnUp">
          <span>Sign Up：</span>
          <div>Sign Up</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { activity_visit, activity_recruit_add } from "@/api/activity.js";
export default {
  data() {
    return {
      info: "",
      ifsignUp: false,
      content: "",
      title: "",
      name: "",
      tel: "",
      address: "",
    };
  },
  created() {
    let id = this.$route.query.id;
    activity_visit({ id: id }).then((res) => {
      this.info = res.data.data;
       if (this.$isMobile()) {
        this.content = this.$pxToRem(res.data.data.content);
      } else {
        this.content = res.data.data.content;
      }
      this.title = res.data.data.title;
      var timestamp = new Date().getTime();
      let finishDate = new Date(this.info.finish_time).getTime();
      if (timestamp > finishDate) {
        this.ifsignUp = false;
      } else {
        this.ifsignUp = true;
      }
    });
  },
  methods: {
    //报名活动
    onSingnUp() {
      let myregMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (!this.name) {
        return this.$message({ type: "erroe", message: "Please type in your name" });
      }
      if (!this.tel || !myregMobile.test(this.tel)) {
        return this.$message({ type: "erroe", message: "Please enter contact information" });
      }
      if (!this.address) {
        return this.$message({ type: "erroe", message: "Please enter the address" });
      }
      activity_recruit_add({
        aid: this.info.id,
        name: this.name,
        mobile: this.tel,
        address: this.address,
      }).then((res) => {
        if (res.data.sta == 1) {
          return this.$message({
            type: "success",
            message: "Congratulations, you have successfully registered",
          });
        } else {
          return this.$message(res.data.msg);
        }
      });
    },
    back() {
      // console.log(this.$route.query);
      this.$router.replace({name:'en_activity',query:{id:this.$route.query.cate_id}});
      // this.$router.go(-1); //返回上一层
    },
  },
};
</script>
<style scoped src="./sass/activity.css"></style>